<template>
	<div class="bg">
		<div class="zzc" v-if="showzzc" @click="close"></div>
		<div class="container">
			<div class="search_box">
				<!-- <div class="select_box" @click.stop="options_show=!options_show;showzzc=!showzzc">
					<div class="form-control" id="select" style="width: 120px;">
						<div :style="ind=='all'?'color:#999':''">
							{{ind!='all'?types[ind].name:'查询方式'}}
						</div>
						<div v-if="ind!='all'" @click.stop="closeall">
							<img src="@assets/images/close.png" alt="">
						</div>
						<img src="@assets/images/down.png" alt="">
					</div>
					<div class="options" v-if="options_show">
						<div class="option" @click.stop="selectit(index)" v-for="item,index in types">{{item.name}}
						</div>
					</div>
				</div> -->

				<el-date-picker prefix-icon='none' :clearable="false" placement="bottom-start"
					style="width: 120px;margin-left: 10px;" v-model="info.year" type="year" @input="changeyear"
					value-format="yyyy" placeholder="年份">
				</el-date-picker>

				<div class="select_box" @click.stop="options_show3=!options_show3;showzzc=!showzzc">
					<div class="form-control" id="select" style="width: 120px;">
						<div :style="ind3=='all'?'color:#999;width:40px':'width:40px'">
							{{ind3!='all'?month[ind3]:'月'}}
						</div>
						<!-- <div v-if="ind3!='all'" @click.stop="info.month='',ind3='all'">
							<img src="@assets/images/close.png" alt="">
						</div> -->

						<img src="@assets/images/down.png" alt="">
					</div>
					<div class="options" v-if="options_show3">
						<div class="option" @click.stop="selectit3(index)" v-for="item,index in month">{{item}}</div>
					</div>
				</div>



				<div class="sea_btn sear_btns" @click="getlist">
					<img src="@assets/images/search.png" alt="">
					查询
				</div>

				<div class="down_btn sear_btns" @click="tabshow=true" v-if="$permissions.indexOf(238)  != -1">
					<img src="@assets/images/logout-rounded.png" alt="">
					打印
				</div>

			</div>


			<div class="box">

				<div class="table">

					<el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
						<el-table-column prop="name" label="日期">
						</el-table-column>
						<el-table-column prop="count" label="总数" sortable></el-table-column>
						<el-table-column prop="hasXj" label="已巡检" sortable></el-table-column>
						<el-table-column prop="notXj" label="未巡检" sortable></el-table-column>
						<!-- <el-table-column prop="completePer" label="巡检完成率" sortable></el-table-column> -->
						<el-table-column prop="normal" label="正常数" sortable></el-table-column>
						<el-table-column prop="exception" label="异常数" sortable></el-table-column>
						<el-table-column prop="exceptionPer" label="巡检异常率" sortable></el-table-column>
					</el-table>
				</div>
			</div>
			<div class="blackzzc" v-if="tabshow">
				<div class="tablealert" id="printDiv">
					<div class="top_btns">
						<div class="print" @click="print">确认打印</div>
						<div class="export" @click="tabshow=false">关闭</div>
					</div>
					<vueEasyPrint ref="easyPrint" tableShow>
						<div class="altabletitle">巡检数量按天数统计</div>
						<table border="1" cellspacing='0'
							style="width:1000px;margin: 0 auto;text-align: center;color: #000;">
							<tr>
								<td>日期</td>
								<td>总数</td>
								<td>已巡检</td>
								<td>未巡检</td>
								<!-- <td>巡检完成率</td> -->
								<td>正常数</td>
								<td>异常数</td>
								<td>巡检异常率</td>
							</tr>
							<tr v-for="item in tableData">
								<td>{{item.name}}</td>
								<td>{{item.count}}</td>
								<td>{{item.hasXj}}</td>
								<td>{{item.notXj}}</td>
								<!-- <td>{{item.completePer}}</td> -->
								<td>{{item.normal}}</td>
								<td>{{item.exception}}</td>
								<td>{{item.exceptionPer}}</td>
							</tr>
						</table>
					</vueEasyPrint>
				</div>
			</div>

		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	import vueEasyPrint from "vue-easy-print"

	export default {
		name: "",
		components: {
			vueEasyPrint,
		},
		data() {
			return {
				tabshow: false,
				types: [{
						name: '按年份',
						id: 1
					},
					{
						name: '按月份',
						id: 2
					},
				],
				month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
				ind: 1,
				ind3: 1,
				showzzc: false,
				options_show: false,
				options_show2: false,
				options_show3: false,
				tableData: [],
				info: {},
			}
		},
		mounted() {
			this.timeFormate();
			this.getlist();
		},

		methods: {
			changeyear(e) {
				console.log(e)
				this.info.year = e
				this.$forceUpdate()
			},
			print() {
				this.$refs.easyPrint.print()
			},

			//显示当前时间（年月日时分秒）
			timeFormate(timeStamp) {
				// if (timeStamp) {
				// 	let year = new Date(timeStamp).getFullYear();
				// 	let month = new Date(timeStamp).getMonth() + 1
				// 	let date = new Date(timeStamp).getDate()
				// 	return year + "-" + month + "-" + date;
				// } else {
				timeStamp = new Date()
				let year = new Date(timeStamp).getFullYear();
				let month = new Date(timeStamp).getMonth() + 1
				// console.log(month)
				this.info.year = year.toString()
				this.ind3 = month - 1
				this.info.month = month
				// }
			},
			getlist() {

				// if (this.info.year == '' && this.info.searchType == 1) {
				// 	this.$Toast('请选择年份');
				// 	return
				// }
				// if (this.info.searchType == 1) {
				// 	this.info.month = ''
				// }

				// if (this.info.searchType == 2) {
				if (this.info.year == '' || this.info.month == '' || this.info.year == null) {
					this.$Toast('请选择年份和月份');
					return
				}
				// return
				// }
				// delete this.info.searchType
				var that = this
				var param = this.info
				this.$http.post(this.$url + '/xj/statistics/xj/byYear', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.tableData = response.data.data

					})
					.catch(function(error) {
						console.log(error);
					});
			},

			// selectit(i) {
			// 	this.ind = i
			// 	this.options_show = false
			// 	// this.info.searchType = this.types[this.ind].id
			// 	this.info.month = ''
			// 	this.showzzc = false
			// },
			selectit3(i) {
				this.ind3 = i
				this.options_show3 = false
				this.info.month = this.month[this.ind3]
				this.showzzc = false
			},

			// 点击遮罩层
			close() {
				this.options_show = false
				this.options_show2 = false
				this.options_show3 = false
				this.showzzc = false
			},
		}
	}
</script>
<style scoped>
	.table {
		margin-top: 30px;
	}

	/deep/ .el-input__icon {
		line-height: 34px;
	}

	/deep/ .el-table .el-table__cell {
		text-align: center;
	}

	/deep/ .el-table .el-table__cell:nth-of-type(1) {
		text-align: left;
	}

	/deep/ .el-table th.el-table__cell>.cell {
		color: #626262;
	}

	/deep/ .el-table .el-table__cell:nth-of-type(2) {
		text-align: left;
		color: #32B16C;
	}

	/deep/ .el-table .el-table__cell:nth-of-type(3) {
		color: #32B16C;
	}

	.table_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 23px;
		margin-bottom: 11px;
	}

	.table_title {
		font-size: 16px;
		font-weight: bold;
		color: #626262;
	}

	.top_btns {
		display: flex;
	}

	.top_btns div {
		font-size: 14px;
		color: #FFFFFF;
		text-align: center;
		line-height: 28px;
		border-radius: 3px;
		width: 63px;
		height: 28px;
		margin-left: 13px;
		cursor: pointer;
	}

	.print {
		background: #32B16C
	}

	.export {
		background: #5BC0DE;
	}

	.bg {
		background: #f6f6f6;
		min-height: 100vh;
	}

	.box_top_left {
		padding-top: 17px;
		height: 370px;
		width: 100%;
		background-color: #fff;
	}

	.box_top {
		display: flex;
		justify-content: space-between;
		margin-top: 17px;
	}

	.box {
		-ms-overflow-style: none !important;
	}

	.box::-webkit-scrollbar {
		display: none;
	}

	.box {
		width: 100%;

		overflow-y: scroll;
		height: calc(100vh - 116px);
	}

	/deep/ .el-input--prefix .el-input__inner {
		height: 34px;
		padding: 0 8px;
	}

	.input-cont:hover .clears {
		display: block;
	}

	.clears {
		width: 10px;
		position: absolute;
		right: 35px;
		top: 14px;
		display: none;
		cursor: pointer;
	}

	/deep/ .el-input__inner {
		width: 114px;
		height: 34px;
		/* background: #F6F6F6; */
		border: 1px solid #CCCCCC;
		box-shadow: 0px 2px 0px 0px #EEEEEE;
		border-radius: 5px;
	}
</style>
